<template>
  <el-dialog :close-on-click-modal="false" :visible="detailFlag" class="zdy-dialog" width="1280px" :title="$t('view')" :lock-scroll="false" :before-close="handleCloseDialog">
    <div class="wrapperform m-b-16">
      <div class="searchbox">
        <el-form
            ref="form"
            :model="form"
            label-width="auto"
        >
          <el-row :gutter="20">
            <el-col :span="10">
                <el-form-item :label="i18n.t('Device name')" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item :label="i18n.t('status')">
                <el-select v-model="form.deviceCommand" placeholder=""
                :popper-append-to-body="false">
                  <el-option :label="item.label" :value="item.id"
                    v-for="(item,index) in stateList"
                    :key="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item class="BlankPlaceholder " label=".">
                <!--<button @click="getJson">get json</button>-->
                <!--重置-->
                <el-button size="small" type="handle" @click="resetSearch">{{this.i18n.t('Reset')}}</el-button>
                <!--查询-->
                <el-button size="small" type="primary" @click="onSearch">{{this.i18n.t('Query')}}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="table-container table-box globalDiv tableView">
      <el-table
        border
        v-loading="tableLoad"
        :data="editTableRow"
        style="width: 100%">
        <el-table-column
          type="index"
          width="100">
        </el-table-column>
        <el-table-column
          prop="deviceInfo.deviceName"
          label="设备名称"
          width="240">
        </el-table-column>
        <el-table-column
          prop="command"
          label="操作类型"
          width="240">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="240">
        </el-table-column>
        <el-table-column
          prop="sendDateTime"
          label="下发时间">
        </el-table-column>
      </el-table>
    </div>
    <div style="background: #fff;padding: 10px;border:0px solid red;position: relative;bottom: 10px;padding-bottom: 10px">
      <el-pagination
          :disabled="tableLoad"
          style="display: inline-block;float: right;position: relative;bottom: 0px"
          small
          background
          :pager-count="5"
          @size-change="handleSizeChange"
          @current-change="handleRightCurrentChange"
          :current-page.sync="form.pageNumber"
          :page-size="form.pageSize"
          layout="sizes,total, prev, pager, next, jumper"
          :total="dataList.totalCount"
          :page-sizes="[10, 20, 50, 100]"
      ></el-pagination>
    </div>

  </el-dialog>
</template>

<script>
  import {queryOperationRecord} from "@/api/kqgl";
  export default {
      name: "views",
      props: {
          editTableRow: {
            type: Array,
            default: () => []
          },
          detailFlag: {
            type: Boolean,
            default: false
          }
      },
      data(){
        return{
            tableLoad: false,
            value: 0,
            saveDisabled:false,
            form:{
              deviceCommand: 0,
              orderBy: [],
              pageNumber: 1,
              pageSize: 10,
              startTime: null,
              endTime: null,
            },
            deviceCommandList: [
              {
                id: null,
                label: '全部',
              },
              {
                id: 1,
                label: '清空人员',
              },
              {
                id: 2,
                label: '人员重置',
              },
              {
                id: 3,
                label: '关门',
              },
              {
                id: 4,
                label: '上锁',
              },
              {
                id: 5,
                label: '开门',
              },
              {
                id: 6,
                label: '开锁',
              },
              {
                id: 7,
                label: '恢复出厂',
              },
              {
                id: 8,
                label: '重启',
              },
            ],
            stateList: [
              {
                id: 0,
                label: '下发中',
              },
              {
                id: 1,
                label: '下发成功',
              },
              {
                id: 2,
                label: '下发失败',
              },
            ],
        }
      },
      mounted(){
          if (this.form.createTime === null) {
            delete this.form.createTime
          }
          console.log(123, this.editTableRow);
          if (this.editTableRow.length > 0) {
            this.editTableRow.forEach(item => {
              item.command = this.getType(item.command, this.deviceCommandList);
              item.state = this.getType(item.state, this.stateList);
            });
          }
          console.log(456, this.editTableRow);
          window.onresize = ()=>{
            this.setTableHeight()
          }
      },
      methods:{
          /**
           * @description  关闭弹窗事件
           * @return not
           * @author xiongyi 2022-06-29 16:48:08
           **/
          handleCloseDialog() {
              this.$emit('update:detailFlag', false);
              this.$emit('update:editTableRow', {});
              this.$emit('update:editTableRow', null);
          },
          queryOperationRecord(params){
            queryOperationRecord(params).then((res) => {
              if (res.code === 200) {
                this.W.$tips("success", this.i18n.t('Add successfully!'));
              }
            }).catch().finally(() => {
              this.saveLoading=false
            })
          },
          getType(num, arr){
            let typeLabel;
            arr.forEach(item => {
                if (item.id == num) {
                    typeLabel = item.label;
                }
            })
            return typeLabel;
          },
          resetSearch() {
            this.tableLoad = true;
            setTimeout(() => {
              this.tableLoad = false;
            }, 1000);
          },
          onSearch() {
            const data = this.editTableRow;
            this.editTableRow = [];
            this.tableLoad = true;
            setTimeout(() => {
              this.editTableRow = data;
              this.tableLoad = false;
            }, 1000);
          },
      }
  }
</script>

<style scoped>
  .el-form /deep/ .el-input__inner,
  .el-form /deep/ .el-select-dropdown__list {
    width: 50%;
  }
  /deep/ .el-select-dropdown {
    /* background: red; */
    width: 250px;
    min-width: 200px;
  }
  .el-form /deep/ .el-input__suffix {
    right: 250px;
  }
</style>
